<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Pragma" content="no-cache">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
    <meta name="format-detection" content="telephone=no" />
    <title>景区</title>
    <meta content="" name="keywords" />
    <meta content="" name="description" />
    <meta content="" name="copyright" />
    <meta content="" name="author" />
    <meta name="robots" content="noarchive">
    <link rel="stylesheet" href="css/public.css" />
    <link rel="stylesheet" href="css/style.css">
    <style>
        .shop_msg_textarea {
            width: 100%;
            height: 1.5rem;
            font-size: .35rem;
        }

        .shop_msg_textarea::-webkit-input-placeholder {
            height: 1.5rem;
            line-height: 1.5rem;
            font-size: .25rem;
        }

        #show_map {
            width: 100%;
            height: 300px;
            margin-top: .4rem;
        }
    </style>
</head>

<body>
    <!--头部-->
    <div class="return_top bgyellow">
        <a href="index.html">
            <span class="login_home cfff">首页</span>
        </a>
    </div>
    <!--//头部结束-->

    <div class="register_cont bgfff">
        <form action="" method="post" class="pb20" enctype="multipart/form-data">
            <input type="hidden" id="shopId">
            <input type="hidden" id="shopLng">
            <input type="hidden" id="shopLat">
            <div class="car_name be4">
                <img src="temp/viewimg.png" class="car_name_img ml30">
                <input placeholder="请输入景区名称" value="" keyboardtype="web-search" type="search" class="car_name_input mr20 fz28" id="view_name">
            </div>
            <div class="car_name be4">
                <img src="temp/viewimg.png" class="car_name_img ml30">
                <input placeholder="请输入景区全称" value="" keyboardtype="web-search" type="search" class="car_name_input mr20 fz28" id="view_full_name">
            </div>
            <div class="car_name be4">
                <img src="temp/user.png" class="car_name_img ml30">
                <input placeholder="请输入联系人" value="" keyboardtype="web-search" type="search" class="car_name_input mr20 fz28" id="car_people">
            </div>
            <div class="car_name be4">
                <img src="temp/payphone.png" class="car_name_img ml30">
                <input placeholder="请输入手机号" value="" keyboardtype="web-search" type="number" class="car_name_input mr20 fz28" maxlength="11" id="phone">
            </div>
            <p class="cred tc pt10 hide tishi"></p>

            <div class="retrievePassword be4 clear">
                <div class="fl">
                    <img src="temp/yzm.png" class="retrievePassword_img fl mt25 ml30">
                    <input placeholder="请输入验证码" value="" keyboardtype="web-search" type="number" maxlength="6" class="fz28 retrievePassword_input fr" id="car_yzm">
                </div>
                <button type="button" class="fr c999 mr10 carmasterbutton fz26" value="" onclick="sendCode(this)">点击发送验证码</button>
            </div>

            <div class="car_name be4">
                <img src="temp/address.png" class="car_name_img ml30">
                <input placeholder="请输入景区地址" value="" keyboardtype="web-search" type="search" class="car_name_input mr20 fz28" id="car_address">
                <input type="hidden" name="shopArea" id="shopArea">
            </div>
            <div id="show_map"></div>
            <div class="car_name be4 shop_msg_textarea">
                <img src="temp/viewimg.png" class="car_name_img ml30">
                <textarea class="mydata_inf_input shop_msg_textarea" name="shopMsg" placeholder="景区介绍" id="shopMsg"></textarea>
            </div>
            <div class="container">
                <!--    照片添加    -->
                <article class="upload-piclist">
                    <div class="upload-file">
                        <input type="file" id="file" accept="image/*" name="file" multiple />
                    </div>
                </article>
            </div>

            <div class="car_cont">
                <button type="button" class="w100 car_cont_submit fz32 cfff" id="save_btn" onclick="return viewFunction()">注册</button>
            </div>
        </form>
    </div>
</body>
<script id="img_item_tpl" type="text/html">
    <div class="upload-Picitem">
        <img src="{{objurl}}" id="{{attachid}}" class="img">
    </div>
</script>
<script id="img_list_tpl" type="text/html">
    {{each data.shopPicList}}
    <div class="upload-Picitem">
        <img src="{{fileUrl}}{{$value.attPath}}" id="{{$value.id}}" class="img">
    </div>
    {{/each}}
</script>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/map.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
<script type="text/javascript" src="js/urlTool.js"></script>
<script type="text/javascript" src="js/template-web.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script src="https://webapi.amap.com/maps?v=2.0&key=a451001d808ffff80790d52df188b739&plugin=AMap.AutoComplete"></script>
<script type="text/javascript">
    var marker, map = new AMap.Map("show_map", {
        zoom: 14
    });
    var url = "/sysShop/register";
    var successStr = "注册成功";
    var shopMsg = getShopMsg();
    if (false != shopMsg) {
        if (shopMsg.shopType == 1) {
            url = "/sysShop/update";
            successStr = "保存成功";
            $("#save_btn").html('保存');
            $("#view_name").val(shopMsg.shopName);
            $("#view_full_name").val(shopMsg.shopFullname);
            $("#shopId").val(shopMsg.shopId);
            $("#shopLng").val(shopMsg.shopLng);
            $("#shopLat").val(shopMsg.shopLat);
            $("#shopMsg").val(shopMsg.shopMsg);
            $("#shopArea").val(shopMsg.shopArea);
            if (shopMsg.shopContract != undefined) {
                $("#car_people").val(shopMsg.shopContract);
            }
            if (shopMsg.shopPhone != undefined) {
                $("#phone").val(shopMsg.shopPhone);
            }
            if (shopMsg.shopPicList != undefined && shopMsg.shopPicList.length > 0) {
                let html = template('img_list_tpl', {
                    data: shopMsg,
                    fileUrl: fileUrl
                });
                $(".upload-piclist").append(html);
            }

            $("#car_address").val(shopMsg.shopAddr);
            map.setCenter([shopMsg.shopLng, shopMsg.shopLat]);
            addMarker(shopMsg.shopLng, shopMsg.shopLat);
        } else {
            layer.open({
                content: '当前身份信息无法注册景区',
                btn: '我知道了',
                yes: function () {
                    if (history.length > 1) {
                        history.go(-1);
                    } else {
                        WeixinJSBridge.call("closeWindow");
                    }
                    return false;
                }
            });
        }
    }

    var auto = new AMap.AutoComplete({
        input: "car_address"
    });
    auto.on("select", function (res) {
        //TODO 针对选中的poi实现自己的功能
        $("#shopArea").val(res.poi.adcode);
        $("#shopLng").val(res.poi.location.lng);
        $("#shopLat").val(res.poi.location.lat);
        showMarker(res.poi.location.lng, res.poi.location.lat);
    })

    function showMarker(lng, lat) {
        map.setCenter([lng, lat]);
        clearMarker();
        addMarker(lng, lat);
    }

    function clearMarker() {
        if (marker) {
            marker.setMap(null);
            marker = null;
        }
    }

    function addMarker(lng, lat) {
        marker = new AMap.Marker({
            icon: "temp/poi-marker-default.png",
            position: [lng, lat],
            offset: new AMap.Pixel(-13, -30)
        });
        marker.setMap(map);
    }


    function sendCode(btn) {
        var phone = $('#phone').val();
        if (!view_phone(phone)) {
            return false;
        }
        sm.req({
            url: '/common/sendCode',
            data: {
                phone: phone
            },
            done: function (res) {
                if (res.code == 200) {
                    giveCode($(btn))
                    layer.open({
                        content: res.message,
                        skin: 'msg',
                        time: 2 //2秒后自动关闭
                    });
                } else {
                    layer.open({
                        content: res.message,
                        btn: '我知道了'
                    });
                }
            }
        })
    }

    $("#file").on("change", function () {
        var filesize = 0;
        var filemaxsize = 10240;
        var filepath = file.value;
        if (filepath) {
            filesize = $("#file")[0].files[0].size;
            var size = filesize / 1024;
            if (size > filemaxsize) {
                layer.open({
                    content: '图片大小不能大于10M',
                    btn: '我知道了'
                });
                file.value = "";
                return false;
            } else if (size <= 0) {
                layer.open({
                    content: '图片大小不能小于0M',
                    btn: '我知道了'
                });
                file.value = "";
                return false;
            }
        } else {
            return false;
        }
        let formData = new FormData();
        formData.append("file", $("#file")[0].files[0]);
        let shopId = $("#shopId").val();
        if (shopId != '') {
            formData.append('objid', shopId);
        }
        let objurl = getObjectURL($("#file")[0].files[0]);
        sm.req({
            url: '/upload/uploadPic',
            data: formData,
            processData: false,
            contentType: false,
            done: function (res) {
                if (res.code == 200) {
                    let html = template('img_item_tpl', {
                        objurl: objurl,
                        attachid: res.data.attachid
                    });
                    $(".upload-piclist").append(html);
                    $("#shopId").val(res.data.objid);
                    $("#file").val("");
                    layer.open({
                        content: res.message,
                        skin: 'msg',
                        time: 2 //2秒后自动关闭
                    });
                } else {
                    layer.open({
                        content: res.message,
                        btn: '我知道了'
                    });

                }
            }
        })
    })

    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }

    // click
    $(document).on('touchend', '.img', function () {
        var that = $(this);
        layer.open({
            content: '确定要删除这张图片吗？',
            btn: ['确定', '取消'],
            yes: function (index) {
                sm.req({
                    url: '/upload/deleteUpload',
                    dataType: 'json',
                    type: 'post',
                    data: {
                        'attachId': that.attr('id')
                    },
                    done: function (res) {
                        that.parent().remove();
                        // $('.z_mask').addClass('hide');
                    }
                })
                layer.close(index);
            }
        });

        return false;
    })

    function viewFunction() {
        var view_name = $('#view_name').val();
        var view_full_name = $('#view_full_name').val();
        var car_people = $('#car_people').val();
        var phone = $('#phone').val();
        var vcode = $('#car_yzm').val();
        var car_address = $('#car_address').val();
        var shopArea = $("#shopArea").val();
        var shopLng = $("#shopLng").val();
        var shopLat = $("#shopLat").val();
        var shopId = $("#shopId").val();
        var shopMsg = $("#shopMsg").val();
        if (view_name == "" || view_name == undefined || view_name == null || view_name.length < 1) {
            layer.open({
                content: '请填写景区名称！',
                btn: '我知道了'
            });
            return false;
        }
        if (view_full_name == "" || view_full_name == undefined || view_full_name == null || view_full_name.length < 1) {
            layer.open({
                content: '请填写景区全称！',
                btn: '我知道了'
            });
            return false;
        }

        if (car_people == "" || car_people == undefined || car_people == null || car_people.length < 1) {
            layer.open({
                content: '请填写景区联系人！',
                btn: '我知道了'
            });
            return false;
        }

        if (!(/^1[3456789]\d{9}$/.test(phone))) {
            layer.open({
                content: '手机号码有误！',
                btn: '我知道了'
            });
            return false;
        }

        if (car_address == "" || car_address == undefined || car_address == null || car_address.length < 1) {
            layer.open({
                content: '请填写景区地址！',
                btn: '我知道了'
            });
            return false;
        }

        if (shopArea == "" || shopArea == undefined || shopArea == null || shopArea.length < 1) {
            layer.open({
                content: '请输入地址后在下拉列表中选择地址！',
                btn: '我知道了'
            });
            return false;
        }
        if (shopMsg == "" || shopMsg == undefined || shopMsg == null || shopMsg.length < 1) {
            layer.open({
                content: '请填写景区介绍！',
                btn: '我知道了'
            });
            return false;
        }
        if (vcode == "" || vcode == undefined || vcode == null || vcode.length < 1) {
            layer.open({
                content: '请填写验证码！',
                btn: '我知道了'
            });
            return false;
        }

        sm.req({
            url: url,
            data: {
                shopName: view_name,
                shopFullname: view_full_name,
                shopArea: shopArea,
                shopLat: shopLat,
                shopLng: shopLng,
                shopId: shopId,
                shopMsg:shopMsg,
                shopContract: car_people,
                shopPhone: phone,
                shopAddr: car_address,
                vcode: vcode,
                shopType: 1
            },
            done: function (res) {
                if (res.code == 200) {
                    removeShopMsg();
                    layer.open({
                        content: successStr,
                        btn: '我知道了',
                        yes: function () {
                            location.href = "viewCenter.html";
                        }
                    });
                } else {
                    layer.open({
                        content: res.message,
                        btn: '我知道了'
                    });
                }
            }
        })
    }
</script>

</html>